<template>
    <div>
        <el-form>
            <el-form-item>
                <el-input v-model="text"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="" @click="clearInput">清空</el-button>
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button type="danger" @click="$emit('removeAll')">重置清单</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { onMounted,ref} from 'vue';
import bus from 'vue3-eventbus';

export default {
    name: 'ToDo',
    props: {

    },
    setup(props, cxt) {
        const text = ref("")
        const msgFromChild=ref('')
        const clearInput = function () {
            text.value = " "
        }
        const submit = function () {
            cxt.emit('toList', text.value)
            text.value = " "
        }
        onMounted(()=>{
            bus.on('getMsg',(value)=>{
                msgFromChild.value=value
            })
        })
        return {
            text,
            clearInput,
            submit,
            msgFromChild
        }
    }
}

</script>

<style></style>